<template>
    <div style="height:100%;width:100%;">
        <bar class="bar" @on-back="$router.back()" title="我的信息"></bar>
        <group>
            <mu-input label="用户姓名" label-class="my-name" v-model="newValue" class="my-edit-name"></mu-input>
        </group>
        <div class="my-input">
            <x-button class="login-submit" @click.native="onSave">保存</x-button>
        </div>
    </div>
</template>

<script>
    import {mapState} from 'vuex'
    import {mapMutations} from 'vuex'
    import VUEX_NAME from '../../store/constants.vue'
    import {
        Bar,
        MInput
    } from 'muka-ui'
    import {
        Group,
        XButton
    } from 'vux'

    export default {
        name: 'editName',
        components: {
            Bar,
            'mu-input': MInput,
            Group,
            XButton
        },
        data: function () {
            return {
                newValue: '',
            }
        },
        created: function () {
            this.newValue = this.myInfo.contactName
        },
        computed: mapState([
            VUEX_NAME.myInfo
        ]),
        methods: {
            ...mapMutations([
                VUEX_NAME.cMyInfo
            ]),
            onSave: async function () {
                if (!this.newValue) {
                    this.$vux.toast.show({
                        text: '请输入用户姓名',
                        type: 'text',
                        position: 'middle'
                    })
                    return
                }
                if (this.newValue === this.myInfo.contactName) {
                    this.$vux.toast.show({
                        text: '没有做任何更改',
                        type: 'text',
                        position: 'middle'
                    })
                    return
                }
                this.$ajax(
                    'mch/editMyInfo',
                    {
                        contactName: this.newValue
                    },
                    (content) => {
                        this.myInfo.contactName = this.newValue
                        this.$router.back()
                    }, true)
            }
        }
    }

</script>
<style lang="less">
    .myInfo-confirm {
        .weui-dialog__btn_default {
            display: none;
        }
    }

</style>
